<template>
	<view>
		<view class="tabbar">
			<view v-for="(item, index) in tabList" :key="index" @click="switchTab(item.url)">
				<view class="plus" v-if="index == 2">
					<u-icon name="plus" size="24" color="#fff"></u-icon>
				</view>
				<view v-else class="tab">
					<u-icon :name="item.icon + (active == index ? '-fill' : '')" size="30" :color="active == index ? themeColor : ''"></u-icon>
					<view :class="active == index ? 'tab-active' : ''">{{ item.name }}</view>
				</view>
			</view>
		</view>

		<u-popup :show="showPopup" @close="handleClosePopup" mode="bottom" round="16">
			<view class="popup-wrapper">
				<view class="popup-wrapper-title">选择你想要的发布类型开始创作</view>
				<view class="popup-button" @click="toCreatePost">
					<view class="popup-icon"><u-icon name="file-text-fill" size="36" :color="themeColor"></u-icon></view>
					<view class="popup-title">发布帖子</view>
					<view class="popup-desc">分享你的桌游故事和精彩瞬间</view>
				</view>
				<view class="popup-button" @click="toCreateActivity">
					<view class="popup-icon"><image src="@/static/activity.png" mode="scaleToFill" /></view>
					<view class="popup-title">发布活动</view>
					<view class="popup-desc">组织桌游聚会，创造难忘时刻</view>
				</view>
			</view>
		</u-popup>
		<u-gap height="100"></u-gap>
	</view>
</template>

<script>
export default {
	name: 'Tabbar',
	props: {
		active: {
			type: Number,
			default: 0
		}
	},
	computed: {},
	data() {
		return {
			tabList: [
				{
					name: '首页',
					url: '/pages/MainPage/MainPage',
					icon: 'home',
					active: false
				},
				{
					name: 'AI',
					url: '/pages/AI/AI',
					icon: 'bookmark',
					active: false
				},
				{
					name: '',
					url: '/pages/Forum/CreatePost/CreatePost',
					icon: 'plus-circle',
					active: false
				},
				{
					name: '桌游',
					url: '/pages/Boardgame/BoardgamePage',
					icon: 'grid',
					active: false
				},
				{
					name: '我的',
					url: '/pages/Me/MePage',
					icon: 'account',
					active: false
				}
			],
			showPopup: false
		};
	},
	methods: {
		switchTab(url) {
			if (url == '/pages/Forum/CreatePost/CreatePost') {
				this.showPopup = true;
			} else {
				uni.switchTab({ url });
			}
		},
		handleClosePopup() {
			this.showPopup = false;
		},
		toCreatePost() {
			uni.navigateTo({ url: '/pages/Forum/CreatePost/CreatePost' });
			this.handleClosePopup();
		},
		toCreateActivity() {
			uni.navigateTo({ url: '/pages/Activity/CreateActivity/CreateActivity' });
			this.handleClosePopup();
		}
	}
};
</script>

<style lang="scss" scoped>
.tabbar {
	background-color: #fff;
	width: 750rpx;
	height: 100rpx;
	position: fixed;
	bottom: 0;
	left: 0;
	z-index: 100;
	padding-bottom: env(safe-area-inset-bottom);
	padding: 15rpx 0;
	display: flex;
	justify-content: space-around;

	.tab {
		display: flex;
		flex-direction: column;
		font-size: 24rpx;
		align-items: center;
		width: 80rpx;

		&-active {
			color: $theme-color;
		}
	}
}

.test {
	background-color: $theme-color;
}

.plus {
	width: 80rpx;
	height: 80rpx;
	background-color: #f17700;
	border-radius: 30rpx;
	display: flex;
	justify-content: center;
	align-items: center;
	margin: auto 25rpx;
}

.plus:active {
	background-color: $theme-color-dark;
}

.popup-wrapper {
	width: calc(100% - 40rpx);
	display: flex;
	flex-direction: column;
	align-items: center;
	padding: 0 20rpx;
	padding-top: 50rpx;

	.popup-wrapper-title {
		font-size: 28rpx;
		color: #666;
		margin-bottom: 50rpx;
	}

	.popup-button {
		display: flex;
		flex-direction: column;
		align-items: center;
		gap: 20rpx;
		width: 600rpx;
		margin-bottom: 40rpx;
		border-radius: 25rpx;
		padding: 40rpx;
		background-color: #fff;
		border: 4rpx solid #f17700;
		transition: all 0.1s;

		&:active {
			opacity: 0.8;
		}

		&:last-child {
			background-color: #f17700;
			.popup-icon {
				background-color: #f49233;
			}
			.popup-title {
				color: #fff;
			}

			.popup-desc {
				color: #fff;
				opacity: 0.8;
			}
		}

		.popup-icon {
			width: 120rpx;
			height: 120rpx;
			border-radius: 100%;
			background-color: #fff0e5;
			display: flex;
			justify-content: center;
			align-items: center;
		}

		image {
			width: 48rpx;
			height: 48rpx;
		}

		.popup-title {
			font-size: 36rpx;
			font-weight: bold;
			color: #333;
		}

		.popup-desc {
			font-size: 24rpx;
			color: #666;
		}
	}
}
</style>
